<template lang="html">
    <div class="block">
        <div>
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                class="tableDatadisplay">
                <el-table-column
                    label="出勤人"
                    align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.username}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="打卡日期"
                    align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.createTime != null">{{$moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>    
                        <span v-else>{{'--'}}</span>                  
                    </template>
                </el-table-column>
                <el-table-column
                    label="补卡原因"
                    align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.closedInfo != null">{{scope.row.closedInfo}}</div>
                        <div v-else>{{'--'}}</div>
                    </template>
                </el-table-column>                                                                               
                <el-table-column
                    label="工作时间"
                    align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.startTime != null">{{$moment(scope.row.startTime).format('HH:mm:ss')}} -- </span>                       
                        <span v-if="scope.row.endTime != null">{{$moment(scope.row.endTime).format('HH:mm:ss')}}</span>  
                        <span v-else>{{'--'}}</span>                        
                    </template>
                </el-table-column>
                <el-table-column
                    label="工作时长"
                    align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.workTime != null">{{scope.row.workTime}}</span>
                        <span v-else>{{'--'}}</span>                          
                    </template>
                </el-table-column>                
                <el-table-column
                    label="打卡类型"
                    align="center">
                    <template slot-scope="scope">
                        <div :style="{color:scope.row.attendanceType == '2'| scope.row.attendanceType == '4'?'green':'red' }">{{scope.row.attendanceType | dataFormat(attendanceTypeArray)}}</div>
                    </template>                    
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="addAttendance(scope.row.departmentId)">补卡申请</el-button>                     
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="queryAttendance(scope.row.departmentId)">查看</el-button>   
                    </template>
                </el-table-column>              
            </el-table>            
        </div>

        <div class="block_pagination">
        <!--prev表示上一页，next为下一页，pager表示页码列表,total表示总条目数，size用于设置每页显示的页码数量。-->
            <el-pagination
                background
                layout="total,prev,sizes, pager, next,jumper"
                :total="total"
                :page-sizes="[5, 10, 15, 20]"
                :page-size.sync="formSearch.pageSize"
                :current-page.sync="formSearch.pageNum"
                @current-change="getPage"
                @size-change="getPage"
                style="float: right">
            </el-pagination>
        </div>

        <el-dialog
            title="补卡申请"
            :visible.sync="addAttendanceVisible"
            :before-close="handleDialogClose">
            <el-form
                :model="addAttendanceForm"
                label-position="right"
                label-width="140px">
                <el-form-item
                    label="请假起止日期">
                    <el-date-picker
                        v-model="addAttendanceForm.timeoff_date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small">
                    </el-date-picker>
                </el-form-item>
                <el-form-item
                    label="请假天数">
                    <el-input-number
                        v-model="addAttendanceForm.timeoff_day"
                        size="small"
                        :min="1"
                        class="inputForm">
                    </el-input-number>
                </el-form-item>
                <el-form-item
                    label="请假原因">
                    <el-input
                        type="textarea"
                        :rows="5"
                        v-model="addAttendanceForm.decs"
                        size="small"
                        class="textareaDecs">
                    </el-input>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="handleDialogClose"
                    size="small">
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    
                    size="small">
                    确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import attendance from '../../../api/attendance.js';
export default {
    data() {
        return {
            tableData:[],
            total:0,
            formSearch:{
                pageNum:1,
                pageSize:10
            },
            //请假单的显示
            addAttendanceVisible: false,
            queryAttendanceVisible: false,            
            //请假单
            addAttendanceForm: {},
            //请假类型
            attendanceTypeArray: [
                {value:1,name:'未打卡'},
                {value:2,name:'正常'},
                {value:3,name:'异常迟到'},
                {value:4,name:'请假'},                
            ],
        }
    },
    created(){
        this.getPage();
    },
    filters:{
        //类型过滤
        dataFormat(value,list){
            return value || value == '1' ? list.filter( (item) => item.value == value)[0].name:""
        }
    },    
    methods: {
        //补卡申请
        addAttendance() {
            this.addAttendanceVisible = true;
        },
        //查看详情
        queryAttendance() {
            this.queryAttendanceVisible = true;
        },
        //当对话框关闭时，初始化数据
        handleDialogClose() {
            this.addAttendanceForm = {
                startTime: '',
                endTime: '',
                leaveType: '',
                leaveInfo: '',
                leaveTime: ''
            };
            this.addAttendanceVisible = false;
        },
        async getPage(){
            const res = await attendance.list(this.formSearch);
            if(res.data.code=== '000'){
                this.tableData=res.data.data.records;
                this.total=res.data.data.total;
            }
        },
        //提交表单
        submitForm() {
            console.log("提交成功");
            this.handleClose();
        }
    }
}
</script>

<style lang="scss">
.block{
    .block_pagination{
        margin-top: 50px;
    }
}
</style>